<template>
  <div class="home">
    <Toolbar />
    <main>
       <!-- 左侧组件列表 -->
       <section class="left">
         <ComponentList />
       </section>
       <!-- 中间画布 -->
       <section class="center">
         <!-- 
           @drop是释放拖拽的元素
           @dragover是拖拽元素到某个地方
           @dragstart是拖拽哪一个元素：在ComponentList.vue中
          -->
           <div
               class="content"
               @drop="handleDrop"
               @dragover="handleDragOver"
               @mousedown="handleMouseDown"
               @mouseup="deselectCurComponent"
               @contextmenu="handleContextMenu"
           >
               <Editor />
           </div>
           <Cropper v-if="ifCropper && curComponent != null" >
           </Cropper>
           <Modify v-if="ifModify && curComponent != null" :minWidth="800" :maxWidth="1000"></Modify>
       </section>
       <!-- 右侧属性列表 -->
       <section class="right">
         <el-tabs v-model="activeName">
            <el-tab-pane label="属性" name="attr">
                <AttrList v-if="curComponent" />
                <p v-else class="placeholder">请选择组件1</p>
            </el-tab-pane>
            <el-tab-pane label="动画" name="animation">
                <AnimationList v-if="curComponent" />
                <p v-else class="placeholder">请选择组件2</p>
            </el-tab-pane>
            <el-tab-pane label="事件" name="events">
                <!-- <EventList v-if="curComponent" /> -->
                <p class="placeholder">请选择组件3</p>
            </el-tab-pane>
        </el-tabs>
       </section>
    </main>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ComponentList from '@/components/ComponentList' // 左侧列表组件
import Toolbar from '@/components/Toolbar'
import Editor from '@/components/Editor/index'
import Modify from '@/components/Modify/index'
import Cropper from '@/components/Cropper/index'
import AttrList from '@/components/AttrList'
import AnimationList from '@/components/AnimationList'
import componentList from '@/custom-component/component-list' // 左侧列表数据
import {deepCopy} from "@/utils/utils"
import generateID from "@/utils/generateID"
export default {
  name: 'Home',
  data(){
    return{
      activeName:"attr",
      reSelectAnimateIndex:undefined,
      cur:{}
    }
  },
  components: {
    Toolbar,
    Editor,
    AttrList,
    AnimationList,
    Cropper,
    ComponentList,
    Modify,
  },
  computed:mapState([
    'componentData',
    'curComponent',
    'isClickComponent',
    'editor',
    "ifCropper",
    'ifModify'
  ]),
  mounted(){
  },
  methods:{
    handleMouseDown(){
      this.$store.commit('setClickComponentStatus',false)
    },
    deselectCurComponent(e){
      if(!this.isClickComponent){
        this.$store.commit('setCurComponent',{
          component:null,
          index:null
        })
      }
      // 0 左击 1 滚轮 2 右击
      if(e.button != 2){
        this.$store.commit('hideContextMenu')
      }
    },
    handleContextMenu(e){
      e.stopPropagation()
      e.preventDefault()
      // 计算菜单相对于编辑器的位移
      let target = e.target
      let top = e.offsetY
      let left = e.offsetX
      // 判断是否是在svg上右击鼠标
      while (target instanceof SVGElement) {
          target = target.parentNode
      }
      // 判断是否右击在图片上
      while (!target.className.includes('editor')) {
          left += target.offsetLeft
          top += target.offsetTop
          target = target.parentNode
      }
      this.$store.commit('showContextMenu', { top, left })
    },
    handleDrop(e){
      e.preventDefault()
      e.stopPropagation()
      const index = e.dataTransfer.getData("index")
      const rectInfo = this.editor.getBoundingClientRect()
      if(index){
        const component = deepCopy(componentList[index])
        component.style.top = e.clientY - rectInfo.y
        component.style.left = e.clientX - rectInfo.x
        component.id = generateID()
        this.$store.commit("addComponent",{component})
      }
    },
    handleDragOver(e){
      e.preventDefault()
      // dataTransfer.dropEffect 获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为  none, copy, link 或 move。
      e.dataTransfer.dropEffect = "copy"
    }
  }
}
</script>
<style scoped>
    
  .home{
    height: 100vh;
  }
  main{
    height: calc(100% - 64px);
    position: relative;
  }
  .left{
    position: absolute;
    height: 100%;
    width: 200px;
    left: 0;
    top: 0;
    padding-top: 10px;
  }
  .right{
    position: absolute;
    height: 100%;
    width: 262px;
    right: 0;
    top: 0;
  }
  .center{
    margin-left: 200px;
    margin-right: 262px;
    background-color: #f5f5f5;
    height: 100%;
    overflow: auto;
    padding: 20px;
  }
  .content{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .placeholder{
    text-align: center;
    color: #333;
  }
</style>
